import { Component, Prop, Emit, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import type { OptionDto } from '../low-code/types'
import toNative from '@/utils/toNative'

@Component
export class ImgSelect extends Render {
    @Prop() modelValue?: string
    @Prop() options!: OptionDto[]
    @Emit('update:modelValue') onChange(value: string | number | boolean) {
        return value
    }

    render() {
        return <div class="flex gap-8 flex-wrap">
            {
                this.options.map(option => <div>
                    <img
                        class={'border border-gray-light w-[80px] rounded-sm ' + (option.value === this.modelValue ? 'border-blue-default' : '')}
                        src={option.label} onClick={() => this.onChange(option.value)} />
                </div>)
            }
        </div>
    }
}

export default toNative<
{ modelValue?: string | number | boolean, options: OptionDto[]},
{'update:modelValue': () => string | number | boolean}>(ImgSelect)